<template>
    <el-container>
        <el-header>
            <el-button @click="handleEdit()">添加房型信息</el-button>
        </el-header>
        <el-footer>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" v-if="false"></el-table-column>
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="typeName" label="名称" min-width="100"></el-table-column>
                <el-table-column prop="bedCount" label="床位数(张)" min-width="50"></el-table-column>
                <el-table-column prop="roomSize" label="总面积(平方米)" min-width="100"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-footer>
    </el-container>

</template>

<script>
    import { ElMessage } from 'element-plus'

    export default {
        data() {
            return {
                tableData: []
            }
        },
        methods: {
            handleEdit(index, row) {
                let url = this.$route.path + '/input';
                this.$router.push({
                    path: url,
                    query: {id: row ? row.id : -1}
                });
            },
            handleDelete(index, row) {
                this.axios.delete('roomtype/' + row.id)
                    .then(resp => {
                        if (!resp.data.flag) {
                            ElMessage.error(resp.data.msg)
                            return;
                        }
                        ElMessage.success(resp.data.msg);
                        this.axios.get('roomtype')
                            .then(resp => {
                                if (!resp.data.flag) {
                                    ElMessage.error(resp.data.msg)
                                    return;
                                }
                                this.tableData = resp.data.data.list;
                            });
                    });
            }
        },
        created() {
            this.axios.get('roomtype')
            .then(resp => {
                if (!resp.data.flag) {
                    ElMessage.error(resp.data.msg)
                    return;
                }
                this.tableData = resp.data.data.list;
            });
        }
    }
</script>

<style scoped>

</style>